<script setup lang="ts">
import { reactive, ref, onUnmounted, onMounted, nextTick } from "vue";
import { useI18n } from "vue-i18n";
import Invitation from "@/components/Activit/distriAgent/invitation.vue";
import MyData from "@/components/Activit/distriAgent/myData.vue";
import Commission from "@/components/Activit/distriAgent/commission.vue";
import Detailed from "@/components/Activit/distriAgent/detailed.vue";
import ActIntroduction from "@/components/Activit/distriAgent/actIntroduction.vue";
import { UserStore } from "@/store";
import { Sticky } from "vant";

const userStore = UserStore();
const { t } = useI18n();
const selectList = reactive([
  { name: t("activity.distriAgent.invitation"), isLogin: 1 },
  { name: t("activity.distriAgent.myData"), isLogin: userStore.isLogin ? 1 : 0 },
  { name: t("activity.distriAgent.commission"), isLogin: userStore.isLogin ? 1 : 0 },
  { name: t("activity.distriAgent.detailed"), isLogin: userStore.isLogin ? 1 : 0 },
  { name: t("activity.distriAgent.FAQ"), isLogin: 1 },
]);
const listIndex = ref(0);
const scrollContainer = ref();
const selectTitle = index => {
  listIndex.value = index;
  if (scrollContainer.value.childElementCount > 0) {
    const childWidth = scrollContainer.value.firstElementChild.clientWidth;
    const scrollAmount = childWidth * index;
    scrollContainer.value.scrollLeft = scrollAmount;
  }
};
const refDetailed = ref();
const closePopups = () => {
  refDetailed.value.closefun();
};
// const offsetTop = ref("1.4rem");
const appWidth = ref(window.innerWidth);
//领取奖励的页面
const refCommission = ref();
onMounted(() => {
  const appElement = document.getElementById("app");
  if (appElement) {
    // 开始监听 #app 元素的尺寸变化
    resizeObserver.observe(appElement);
  }
});
const offsetTop = ref(1.4);
// 创建 ResizeObserver 实例
const resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    // 获取 #app 元素的宽度并更新
    if (entry.target.id === "app") {
      appWidth.value = entry.contentRect.width;
      if (appWidth.value < 400) {
        offsetTop.value = 53;
      } else if (appWidth.value >= 430 && appWidth.value < 460) {
        offsetTop.value = 60;
      } else if (appWidth.value >= 460 && appWidth.value < 480) {
        offsetTop.value = 65;
      } else if (appWidth.value >= 480 && appWidth.value < 515) {
        offsetTop.value = 70;
      } else if (appWidth.value <= 527 && appWidth.value > 480) {
        offsetTop.value = 74;
      } else if (appWidth.value >= 530) {
        offsetTop.value = 1.5;
      }
    }
  });
});
const isRewards = ref(false);
const isRewardsfun = e => {
  if (e) {
    selectTitle(2);
    isRewards.value = true;
  }
};
onUnmounted(() => {
  const appElement = document.getElementById("app");
  if (appElement) {
    // 停止监听 #app 元素的尺寸变化
    resizeObserver.unobserve(appElement);
  }
});
</script>
<template>
  <div class="frame-div" @click.stop="closePopups">
    <div class="top-img-frame">
      <div class="dianzi-frame"></div>
      <!-- <Sticky :offset-top="offsetTop + 'rem'"> -->
      <Sticky :offset-top="offsetTop + 'px'" style="width: 100%">
        <div ref="scrollContainer" class="select-titele df">
          <div class="dianzi"></div>
          <div v-for="(item, index) in selectList" :key="index">
            <div
              v-if="item.isLogin == 1"
              class="titele-content df ai-center"
              :class="{ selectIndex: listIndex == index }"
              @click="selectTitle(index)"
            >
              {{ item.name }}
              <div class="red-frame" v-if="isRewards && index == 2"></div>
            </div>
          </div>
          <div class="dianzi"></div>
        </div>
      </Sticky>
    </div>
    <div class="content-page-frame">
      <div class="content-frame">
        <Invitation v-show="listIndex == 0" />
        <MyData v-show="listIndex == 1" />
        <Commission v-show="listIndex == 2" ref="refCommission" @isRewardsfun="isRewardsfun" />
      </div>
      <Detailed v-show="listIndex == 3" ref="refDetailed" />
      <div class="content-frame">
        <ActIntroduction v-show="listIndex == 4" />
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.top-img-frame {
  width: 100%;
  height: 332px;
  position: relative;
  left: 0;
  top: 0;
  background-image: url(@/image/new_img/activity/acting_img.png);
  background-size: cover;
  background-repeat: repeat;
  margin-top: -16px;
  img {
    width: 100%;
    height: 332px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .selectIndex {
    background: #ab3fe7;
    border-radius: 14.498px 14.459px 0 0;
  }

  .dianzi {
    padding-left: 20px;
    height: 100%;
  }
}
.content-page-frame {
  width: 100%;
  height: auto;
}
.content-frame {
  width: calc(100% - 66px);
  height: auto;
  margin: auto;
}

.select-titele {
  padding-top: 2px;
  width: 100%;
  height: 76px;
  /*半透明背景色 */
  backdrop-filter: blur(10px);
  /*背景模糊效果 */
  -webkit-backdrop-filter: blur(10px);
  overflow-x: auto;
  background: rgba(36, 18, 46, 0.75);
  border-bottom: 1.5px solid #ab3fe7;

  .titele-content {
    padding-left: 20px;
    padding-right: 20px;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
  }
}

.select-titele::-webkit-scrollbar {
  display: none;
  overflow: -moz-scrollbars-none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 和 Edge */
}
.dianzi-frame {
  width: 100%;
  height: 254px;
}
.sticky-frame {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}
.content-frame2 {
  width: calc(100% - 66px);
  height: calc(100% - 332px);
  overflow-y: scroll;
  margin: auto;
  &::-webkit-scrollbar {
    display: none;
    overflow: -moz-scrollbars-none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
  }
}
.red-frame {
  width: 14px;
  height: 14px;
  position: absolute;
  right: 10px;
  top: 14px;
  border-radius: 50%;
  background-color: red;
  border: 0.5px solid #ffffff;
}
</style>
